<template>
  <view class="wrap bd">
    <!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
    <view>
      <!-- 			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" active-color="#18C7E1"
			 bar-width="150" swiperWidth="750" class="bd t1"></u-tabs-swiper> -->
      <u-tabs
        activeColor="#18C7E2"
        :list="list"
        :is-scroll="true"
        :item-width="260"
        bar-height="0"
        class="bd t1"
        font-size="32"
        :current="current"
        @change="tabsChange"
      ></u-tabs>
    </view>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
      :style="{ height: windowHeight + 'px' }"
    >
      <swiper-item class="swiper-item">
        <reminder
          planType="1"
          v-if="showTip1"
          v-bind:message="infomate"
        ></reminder>
        <view style="margin: 20upx 30upx 0" class="btns">
          <u-button
            style="background-color: #18c7e1; color: #fff"
            @click="showTips('1')"
            :style="{ backgroundColor: appointment1 ? '#18C7E1' : '#ccc' }"
            v-show="appointment1"
          >
            预约此次接种</u-button
          >
          <u-button
            style="background-color: #18c7e1; color: #fff"
            :style="{ backgroundColor: appointment1 ? '#18C7E1' : '#ccc' }"
            v-show="!appointment1"
          >
            已预约</u-button
          >
        </view>
        <view :class="showTip1 ? 'c-list c-listspc' : 'c-list'">
          <view>
            <view
              class="u-item"
              style="padding: 0 36upx"
              v-for="(v, index) in injectPlan"
              :key="index"
            >
              <view class="flex flex-j-b t1">
                <!-- <view style="font-size: 30upx;font-weight: 900;">{{v.planName}}</view> -->
                <view class="flex" style="font-size: 30upx; font-weight: 900">
                  <view>{{ v.planName }}</view>
                  <image
                    src="../../../../static/img/148d4d3772284677b5d871a58aedcd49.png"
                    mode="widthFix"
                    style="width: 70upx; margin-left: 20upx"
                    @click="goTips(v)"
                    v-show="v.tips"
                  ></image>
                </view>
              </view>
              <view
                v-for="(v1, index1) in v.vaccinesPlans"
                :key="index1"
                @click="goVacDetail(v1, v.id)"
                class="flex flex-j-b item-li uni-item-line"
              >
                <view style="padding-top: 20upx">
                  <view>
                    <u-tag
                      :text="v1.type == 1 ? '免费' : '自费'"
                      type="warning"
                      size="mini"
                      bg-color="#fff"
                      :color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                      :border-color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                    />
                    <text
                      style="
                        padding: 0 10upx;
                        display: inline-block;
                        margin-bottom: 20upx;
                      "
                      >{{ v1.vname }}(第{{ v1.num }}/{{ v1.total }}针)</text
                    >
                    <!-- <view v-if="v1.type == '2'"> -->
                    <view>
                      <u-tag
                        v-if="v1.adequate == 0"
                        text="库存充足"
                        type="success"
                        size="mini"
                      />
                      <u-tag
                        v-else-if="v1.adequate == 1"
                        text="库存紧缺"
                        type="warning"
                        size="mini"
                      />
                      <u-tag
                        v-else="v1.adequate == 2"
                        text="无库存"
                        type="error"
                        size="mini"
                      />
                    </view>
                  </view>
                </view>
                <view
                  class="flex flex-al-c"
                  style="
                    width: 200upx;
                    font-size: 20upx;
                    justify-content: flex-end;
                  "
                >
                  <!-- 								<u-tag :text="v1.type=='0'?'未完成':v1.type=='1'?'已完成':'未预约'" type="warning" size="mini"
									bg-color="#fff" :color="v1.type==1?'#18C7E1':'#F78E3A'" 
									:border-color="v1.type==1?'#18C7E1':'#F78E3A'"/> -->
                  <view
                    class="iconfont iconarrow-right"
                    style="font-size: 40upx; color: #c3c3c3"
                  >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <!-- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom"> -->
        <reminder2 planType="2" v-if="showTip2"></reminder2>
        <view style="position: fixed; z-index: 111; width: 100%">
          <view style="margin: 20upx 30upx 0" class="btns">
            <u-button
              style="background-color: #18c7e1; color: #fff"
              @click="showTips('2')"
              :style="{ backgroundColor: appointment2 ? '#18C7E1' : '#ccc' }"
              v-show="appointment2"
            >
              预约此次儿保</u-button
            >
            <u-button
              style="background-color: #18c7e1; color: #fff"
              :style="{ backgroundColor: appointment2 ? '#18C7E1' : '#ccc' }"
              v-show="!appointment2"
            >
              已预约</u-button
            >
          </view>
        </view>
        <view
          :class="showTip2 ? 'c-list c-listspc s11' : 'c-list'"
          style="padding-top: 100rpx"
        >
          <view
            class="c-item"
            style="padding: 20upx 30upx 20upx 40upx"
            v-for="(v, index) in plan"
            :key="index"
            @click="goDetail(v)"
          >
            <view class="flex flex-j-b t1">
              <view style="font-size: 30upx; font-weight: 900">{{
                v.planName
              }}</view>
              <view class="flex">
                <!-- 									<view v-if="v.subscribe">
										<u-tag text="预约" type="error" shape="circle" bg-color="#fff"
											color="#18C7E1" border-color="#18C7E1"/>
									</view> -->
                <view
                  class="iconfont iconarrow-right"
                  style="font-size: 40upx; color: #c3c3c3"
                ></view>
              </view>
            </view>
            <view class="uni-item-line" style="padding: 0 0 20upx">
              <view
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  margin-top: 20upx;
                "
                class="t1"
                >{{ v.sketch }}</view
              >
              <!-- 								<view style="font-size: 20upx;color: #18C7E1;">
									{{v.checkType==0?'出生,未完成测量':v.checkType==1?'出生,已完成测量':'未预约'}}
								</view> -->
            </view>
          </view>
        </view>
        <!-- </scroll-view> -->
      </swiper-item>
      <swiper-item class="swiper-item">
        <!-- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom"> -->
        <reminder
          planType="12"
          v-if="showTipDoor"
          v-bind:message="infomate"
        ></reminder>
        <view
          v-else="showTipDoor"
          style="
            font-size: 38rpx;
            text-align: center;
            line-height: 70vh;
            height: 100vh;
          "
          class="t1"
          >您还未预约，请先去<span
            style="color: #007aff !important; cursor: pointer"
            @click="goyuyue()"
            >预约</span
          >
        </view>
        <!-- </scroll-view> -->
      </swiper-item>
      <swiper-item
        class="swiper-item"
        v-for="item in list.slice(3, list.length)"
      >
        <!-- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom"> -->
        <reminder
          :deptId="item.deptId"
          :deptName="item.name"
          v-if="showTipDoor1 && item.deptId == hasDeptId"
        >
        </reminder>
        <view
          v-else="showTipDoor1"
          style="
            font-size: 38rpx;
            text-align: center;
            line-height: 70vh;
            height: 100vh;
          "
          class="t1"
          >您还未预约，请先去<span
            style="color: #007aff !important; cursor: pointer"
            @click="goyuyue()"
            >预约</span
          >
        </view>
        <!-- </scroll-view> -->
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import reminder from "@/components/reminder.vue";
import reminder2 from "@/components/reminder2.vue";
export default {
  components: {
    reminder,
    reminder2,
  },
  data() {
    return {
      list: [
        {
          name: "预防接种",
        },
        {
          name: "儿童保健",
        },
        {
          name: "门诊预约",
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

      tabs: [{}, {}],
      windowHeight: 800,

      // 待办接种计划
      injectPlan: [],
      // 待办列表
      plan: [],

      appointment1: false, // 第一个接种是否预约
      appointment2: false, // 第一个儿保是否预约

      showTip1: false,
      showTip2: false,
      showTipDoor: false,
      type: "1",
      tipTit: "",
      community: {},
      infomate: {
        id: "",
        isabs: "",
      },
      sq: "",
      carshow: "", //判断动态的科室是否显示
      hasDeptId: "", //有预约卡片的id
      showTipDoor1: false, //动态科室卡片
      localPeole: "", //是否常驻人口 0是，1否
    };
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  onReady() {
    // this.getUiStyle();
  },
  onLoad(option) {
    console.log(option);
    this.dtname = option.name;
    this.dtype = option.type;
    this.infomate.name = option.name;
    this.getAnyId();
    if (JSON.stringify(option) == "{}") {
      this.getYyKs(); //获得最早预约但未取消的信息
    } else {
      this.getKsIndex(this.dtname, this.dtype);
    }
    this.getInjectPlan(); // 获取接种计划
    setTimeout(() => {
      this.getPlan(); //儿保
    }, 300);
    this.getUniIntro();
  },
  onShow() {
    this.getSysInfo();
    // this.getDoor()
  },
  methods: {
    //获得最早预约但未取消的信息
    getYyKs() {
      this.config
        .get("/subscribesInfos/getUserSubscribeInfo", {})
        .then((res) => {
          if (res.data.data) {
            if (res.data.data.flag == 1) {
              this.dtname = 0;
              this.dtype = res.data.data.type;
            } else {
              this.dtname = res.data.data.type;
              this.dtype = 0;
              const ksName = res.data.data.type;
              const newIndex = this.list.findIndex((a) => a.name == ksName);
              if (newIndex != -1) {
                console.log(newIndex);
                this.getCard(this.list[newIndex].deptId);
              }
            }
            setTimeout((s) => {
              this.getKsIndex(this.dtname, this.dtype);
            }, 800);
          }
        });
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    //获得新卡片
    getCard(id) {
      let self = this;
      this.config
        .get("/getSysDept/getCardSubscribe", {
          deptId: id || "",
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            if (res.data.data.checkType == "1") {
              self.showTipDoor1 = true;
              self.hasDeptId = res.data.data.deptId;
            }
            if (
              res.data.data.checkType == "2" &&
              res.data.data.checkType == "0"
            ) {
              self.showTipDoor1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    //获取动态科室
    getAnyId() {
      this.config.get("/getSysDept/getOther", {}).then((res) => {
        console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          if (
            res.data.data[i].population == 0 ||
            res.data.data[i].population == 1
          ) {
            let datas = {
              name: res.data.data[i].deptName,
              deptId: res.data.data[i].deptId,
            };
            this.list.push(datas);
          }
        }
        setTimeout((s) => {
          this.getKsIndex(this.dtname, this.dtype);
        }, 1000);
      });
    },
    goyuyue() {
      uni.navigateTo({
        url: "./backlog-tab2",
      });
    },
    //获取社区信息
    getUniIntro() {
      let self = this;
      this.config.post("/communityInfo/getCommunityDetail", {}).then((res) => {
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
          if (uni.getStorageSync("community")) {
            self.uniDetail = JSON.parse(uni.getStorageSync("community"));
          } else {
            self.uniDetail = res.data.data;
            uni.setStorageSync("community", JSON.stringify(res.data.data));
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    //门诊预约
    getDoor() {
      let self = this;
      this.config.get("/anency/outpatient/getOutpatient", {}).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          if (res.data.data.checkType == "1") {
            self.showTipDoor = true;
          }
          if (res.data.data.checkType == "2") {
            self.showTipDoor = false;
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    //old事件
    change(index) {
      this.current = index;
      this.swiperCurrent = index;
    },
    // tabs通知swiper切换
    tabsChange(index) {
      console.log(index);
      if (index == 0) {
        this.current = index;
        this.swiperCurrent = index;
        this.getInjectPlan();
      } else if (index == 1) {
        this.current = index;
        this.swiperCurrent = index;
        this.getPlan();
      } else if (index == 2) {
        this.current = index;
        this.swiperCurrent = index;
        this.getDoor();
      } else {
        this.current = index;
        this.swiperCurrent = index;
        this.getCard(this.list[index].deptId);
      }
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      // this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      // this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      if (this.list[current].deptId) {
        this.getCard(this.list[current].deptId);
      }
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    goTips(v) {
      uni.navigateTo({
        url: "/pages/main/pub/little-tips?planId=" + v.id + "&tType=" + "1",
      });
    },
    // 儿童接种疫苗详情
    goVacDetail(v, id) {
      //type 1 免费  2自费
      uni.navigateTo({
        url:
          "/pages/main/child/backlog/vaccine-detail?id=" +
          v.vid +
          "&type=0" +
          "&sq=" +
          this.sq +
          "&planId=" +
          id +
          "&vtype=" +
          v.type +
          "&vPid=" +
          v.id,
      });
    },
    // 儿童保健详情
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/main/child/backlog/plan-detail?id=" + v.id,
      });
    },
    // 获取接种计划
    getInjectPlan() {
      let self = this;
      // uni.showLoading({
      // 	title: '加载中',
      // 	mask: true
      // });
      // setTimeout(s => {
      // 	uni.hideLoading()
      // }, 5000)
      this.config
        .get("/agency/planChrInoculation/getPlanChrInoculation", {})
        .then((res) => {
          // uni.hideLoading();
          if (res.data.code === 200) {
            self.infomate.id = res.data.data[0].id;
            self.infomate.isabs = res.data.data[0].isAbsence;
            self.injectPlan = res.data.data;
            // //console.log(self.injectPlan)
            // state状态 0：未预约  1：已预约 2 已完成
            if (!res.data.data) return;
            if (self.injectPlan[0].checkType == "0") {
              self.appointment1 = true;
            }
            if (self.injectPlan[0].checkType == "1") {
              self.appointment1 = false;
              self.showTip1 = true;
            }
            if (self.injectPlan[0].checkType == "2") {
              self.appointment1 = true;
              self.showTip1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 获取待办列表
    getPlan() {
      let self = this;
      // uni.showLoading({
      // 	title: '加载中',
      // 	mask: true
      // });
      // setTimeout(s => {
      // 	uni.hideLoading()
      // }, 5000)
      this.config
        .get("/agency/childCarePlan/getChildCarePlan", {})
        .then((res) => {
          // uni.hideLoading();
          if (res.data.code === 200) {
            self.plan = res.data.data;
            if (!res.data.data) return;
            if (self.plan[0].checkType == "0") {
              self.appointment2 = true;
              self.showTip2 = false;
            }
            if (self.plan[0].checkType == "1") {
              self.appointment2 = false;
              self.showTip2 = true;
            }
            if (self.plan[0].checkType == "2") {
              self.appointment2 = true;
              self.showTip2 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getPlanss() {
      uni.redirectTo({
        url: "/pages/main/child/backlog/backlog-tab",
      });
    },
    // 预约接种跳转
    appInoculate() {
      if (!this.appointment1) return;
      let community = JSON.parse(uni.getStorageSync("community"));
      let obj = {
        // deptId: community.deptId, // 社区ID
        planId: this.injectPlan[0].id, // 预约计划ID
        planType: "1", // 预约类型
        type: "1", // 1待办/2预约
        yyxm: "预约接种",
        // yysq: community.deptName || this.sq,  原来
        yysq: this.sq,
        vtype: 1,
        vPid: "",
      };
      // 儿童接种、儿童保健、儿童门诊、孕妇产检、孕妇接种、孕妇门诊、老年人体检、
      // 老年人接种、老年人门诊、普通人接种、普通人门诊
      uni.navigateTo({
        url: "/pages/main/child/backlog/calendar?data=" + JSON.stringify(obj),
      });
    },
    // 点击儿童保健跳转预约
    appPlan() {
      if (!this.appointment2) return;
      let community = JSON.parse(uni.getStorageSync("community"));
      let obj = {
        // deptId: community.deptId, // 社区ID
        planId: this.plan[0].id, // 预约计划ID
        planType: "2", // 预约类型
        type: "2", // 1待办/2预约
        yyxm: "儿童保健",
        yysq: this.sq,
        vPid: "",
      };
      uni.navigateTo({
        url: "/pages/main/child/backlog/calendar?data=" + JSON.stringify(obj),
      });
    },
    //是否是常驻人口
    isPtPeople() {
      this.config.get("/flow/getUserFlow", {}).then((res) => {
        this.localPeole = res.data.data;
      });
    },
    // 预约提示弹窗
    showTips(type) {
      if (type == 1) {
        if (!this.appointment1) return;
      }
      if (type == 2) {
        if (!this.appointment2) return;
      }
      this.isPtPeople();
      if (this.localPeole == 0) {
        if (this.type == "2") this.appPlan();
      } else {
        uni.showToast({
          title: "当前预约人数已满",
          icon: "none",
        });
      }
      this.type = type;
      if (type == "1") this.tipTit = "接种";
      if (type == "2") this.tipTit = "儿保";
      // let community = JSON.parse(uni.getStorageSync('community'));
      // this.community = community;
      if (this.type == "1") this.appInoculate();
    },
    getKsIndex(name, type) {
      //动态tab
      if (type == 1) {
        // this.current = 0;
        // this.swiperCurrent = 0;
        this.getInjectPlan();
        this.tabsChange(0);
      } else if (type == 2) {
        // this.current = 1;
        // this.swiperCurrent = 1;
        this.getPlan();
        this.tabsChange(1);
      } else if (type == 12) {
        console.log("是否执行门诊");
        // this.current = 2;
        // this.swiperCurrent = 2;
        this.getDoor();
        this.tabsChange(2);
      } else {
        const ksName = name;
        const newIndex = this.list.findIndex((a) => a.name == ksName);
        if (newIndex != -1) {
          console.log(newIndex);
          this.current = newIndex;
          this.swiperCurrent = newIndex;
          this.tabsChange(newIndex);
          this.getCard(this.list[newIndex].deptId);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  position: fixed;
}

.c-list {
  height: calc(100vh - var(--window-top));
  overflow-y: scroll;
  padding-bottom: 30%;
}

.c-listspc {
  padding-bottom: 100%;
}

.item-li {
  padding: 20upx 0;
}

.btns {
  position: relative;
  width: 94%;
  left: -1%;
  z-index: 999;
}

.u-item {
  margin-top: 30rpx;
}

.c-list {
  margin-top: 30rpx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .t1 {
    color: #ccc !important;
  }

  >>> span {
    color: #ccc !important;
  }
}
</style>
